<template>
	<view class="bg-gray1">
		<cu-custom :bgColor="'bg-'+theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">我的</block>
		</cu-custom>

		<!-- 顶部个人信息 -->
		<view class="user_info">
			<view class="info_content">
				<view class="flex justify-between align-center">
					<view class="flex align-center">
						<view v-if="userInfo.headimgUrl" class="user_head"
							:style="'background-image:url(' + userInfo.headimgUrl + ')'">
						</view>
						<view v-if="!userInfo.headimgUrl" class="user_head user_head1"></view>
						<view class="">
							<view class="text-bold text-xl" v-if="userInfo.nickName">{{userInfo.nickName}}</view>
							<view class="sm margin-top-sm" v-if="userInfo.phone">
								<image src="../../../static/image/phone.png" mode="" style="width: 20rpx;height:20rpx;">
								</image>
								<text>{{userInfo.phone}}</text>
							</view>
						</view>
					</view>
					<view class="" @click="agreeGetUser" style="padding: 30rpx 10rpx 30rpx 30rpx;">
						<image src="../../../static/image/edit.png" mode="" style="width: 30rpx;height:30rpx;"></image>
					</view>
				</view>
				<view class="stats">
					<view class="text-center">
						<view class="sub_title">当日收益(元)</view>
						<view class="text-black text-bold font-38">{{topData.earn1}}</view>
					</view>
					<view class="text-center">
						<view class="sub_title">近7日收益(元)</view>
						<view class="text-black text-bold font-38">{{topData.earn7}}</view>
					</view>
					<view class="text-center">
						<view class="sub_title">近30日收益(元)</view>
						<view class="text-black text-bold font-38">{{topData.earn30}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 推荐官 -->
		<view class="referrals">
			<view class="flex justify-between align-center">
				<view style="width: 65%;">
					<view class="text-bold font-30">青铜推荐官</view>
					<view class="flex margin-top align-center">
						<view class="grade">青铜</view>
						<view class="cu-progress round margin-right-xs" style="height: 15rpx;">
							<view class="bg-gold" style="width:50%"></view>
						</view>
						<view class="grade">黄金</view>
					</view>
				</view>
				<view>
					<image src="../../../static/image/bronze.png" mode="" style="width: 140rpx;height:140rpx"></image>
				</view>
			</view>
			<view class="explain">升级规则待开发</view>
		</view>

		<!-- 收藏夹 -->
		<text-bar title="收藏夹" pageUrl="/pages/user/user-collect/index"></text-bar>

		<!-- 订单 -->
		<view class="order">
			<view class="goods_com">
				<view v-for="(item, index) in comList" :key="index" @click="tabSelect(item,index)">
					<view class="" :class="'cu-item '+(index==currentTabCur? 'tab_active':'')">{{item.value}}</view>					
				</view>				
			</view>
			<view class="goods_com1">
				<view v-for="(item, index) in comList2" :key="index" @click="tabSelect(item,index)">
					<view class="padding-top" @click.stop="jumpOrderList(item.title)">
						<view class="" style="height: 50rpx;">
							<image class="o_Img" :src="item.src" mode="widthFix"></image>
						</view>
						<view class="margin-top-xs text-sm">{{item.title}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import api from 'utils/api'
	import util from 'utils/util'
	import __config from '@/config/env'; // 配置文件Ω
	import textBar from '@/components/text-bar/text-bar.vue'

	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				theme: app.globalData.theme, //全局颜色变量
				userInfo: {},
				currentTabCur: 0, // 当前选中榜单
				comList: [{
					value: '全部订单',
					key: '0'
				}, {
					value: '推广订单',
					key: '1'
				}, {
					value: '自购订单',
					key: '2'
				}],
				comList2:[
					{
						src: '../../../static/image/order1.png',
						title: '已付款'
					}, {
						src: '../../../static/image/order2.png',
						title: '已完成'
					}, {
						src: '../../../static/image/order4.png',
						title: '已退款'
					}, {
						src: '../../../static/image/order3.png',
						title: '已失效'
					}
				],
				topData: {
					earn1: 0,
					earn7: 0,
					earn30: 0
				}
			};
		},

		components: {
			textBar
		},

		onShow() {
			app.checkLogin('checkLogin').then(res => {
				app.initPage().then(res => {
					this.getUserInfo()
				})
			})			
		},

		onLoad(option) {

		},
		methods: {
			getUserInfo() {
				api.userInfoGet().then(res => {
					if (res.data) {
						this.userInfo = res.data
						uni.setStorageSync('user_info', this.userInfo)
						this.getTopData()
					}
				})
			},
			// 切换榜单
			tabSelect(item, i) {
				this.currentTabCur = i
			},
			// 跳转
			agreeGetUser(e) {
				uni.getSystemInfo({
					success: (e) => {
						if (e.hostVersion) {
							const v = e.hostVersion.split('.')
							console.log(e)
							if (v && v.length > 2) {
								if (Number(v[0]) >= 8 && Number(v[2]) >= 28) {
									uni.navigateTo({
										url: '/pages/user/user-info/index?v=1'
									})
								} else {
									uni.navigateTo({
										url: '/pages/user/user-info/index?v=2'
									})
								}
							}
						}

					}
				})
			},
			// 跳转订单列表
			jumpOrderList(status) {
				app.checkLogin('center').then(res => {
					uni.navigateTo({
						url: '/pages/order/order-list/index?status1=' + this.currentTabCur + '&status2=' +
							status
					})
				})
			},
			// 顶部统计信息查询
			getTopData() {
				api.getStatistics('1', this.userInfo.id).then(res => {
					this.topData.earn1 = res.data && res.data.commission ? res.data.commission : 0
				})
				api.getStatistics('7', this.userInfo.id).then(res => {
					this.topData.earn7 = res.data && res.data.commission ? res.data.commission : 0
				})
				api.getStatistics('30', this.userInfo.id).then(res => {
					this.topData.earn30 = res.data && res.data.commission ? res.data.commission : 0
				})
			}
		}
	};
</script>
<style scoped>
	.user_info {
		background-image: linear-gradient(#FD8CA8, #FFFFFF);
		padding: 30rpx 20rpx 0rpx 20rpx;
	}

	.user_info .info_content {
		background-color: #FFFCFE;
		border-radius: 15rpx;
		padding: 20rpx;
	}

	.user_info .info_content .user_head {
		width: 128rpx;
		height: 128rpx;
		border: #FFFFFF 4rpx solid;
		margin-right: 15rpx;
		border-radius: 50%;
		background-size: cover;
		background-position: center;
		vertical-align: middle;
	}

	.user_info .info_content .user_head1 {
		background-image: url('https://future-app.oss-cn-hangzhou.aliyuncs.com/ui-image/my_default.png');
	}

	.user_info .stats {
		display: flex;
		justify-content: space-between;
		border-top: 1rpx dashed #E5E6EB;
		margin-top: 30rpx;
		padding-top: 20rpx;
	}

	.user_info .stats .sub_title {
		color: #4E5969;
		font-size: 24rpx;
		margin-bottom: 14rpx;
	}

	.referrals {
		margin: 30rpx 20rpx;
		background-image: linear-gradient(90deg, #FAE4C1, #FFF9EE, #F8E7C8, #E2BC74, #F2CD88, #F9DFB7);
		border-radius: 15rpx;
		padding: 20rpx;
		color: #D78840;
	}

	.referrals .grade {
		width: 80rpx;
		font-size: 24rpx;
	}

	.referrals .explain {
		font-size: 22rpx;
		border-top: 1rpx dashed #D78840;
		padding-top: 15rpx;
		margin-top: 20rpx;
	}

	.order {
		margin: 30rpx 20rpx;
		background-color: #fff;
		border-radius: 15rpx;
		padding: 20rpx;
		color: #4E5969;
	}

	.goods_com {
		/* height: 60rpx; */
		color: #4E5969;
		text-align: center;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.goods_com .cu-item {
		padding-bottom: 10rpx;
	}

	.goods_com .tab_active {
		color: #FF001F;
		border-bottom: 6rpx solid #FF001F;
	}
	
	.goods_com1 {
		/* height: 60rpx; */
		color: #4E5969;
		text-align: center;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}


	.order .o_Img {
		width: 50rpx;
		max-height: 60rpx;
	}
</style>